<!-- 搜索表单 -->
<template>
  <div>

    <el-form label-width="77px"
             class="ele-form-search"
             ref="where"
             :model="where"
             @keyup.enter.native="search"
             @submit.native.prevent>

      <el-row :gutter="15">
        <el-col :span="24">
          <h5 class="navList">提现记录</h5>
        </el-col>

      </el-row>
      <el-row :gutter="15">

        <!-- <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 8 }">
          <el-form-item label="商家名称:">
            <el-input clearable
                      v-model="where.oemCode"
                      placeholder="请输商家名称" />
          </el-form-item>
        </el-col> -->

        <!-- <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 8 }">
          <el-form-item label="所属代理:">
            <el-input clearable
                      v-model="where.oemCode"
                      placeholder="请输入所属代理名称" />
          </el-form-item>
        </el-col> -->
        <!-- <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 8 }">
          <el-form-item label="进件状态:">
            <el-select clearable
                       v-model="where.agencyId"
                       placeholder="请选择进件状态"
                       class="ele-fluid">
              <el-option v-for="(i,j) in typeList"
                         :key="j"
                         :label="i.agencyName"
                         :value="i.id" />
            </el-select>
          </el-form-item>
        </el-col> -->

        <el-col v-bind="styleResponsive ? { lg: 8, md: 8 } : { span: 8 }">
          <el-form-item label="申请时间:"
                        prop="dateRange">
            <el-date-picker v-model="where.dateRange"
                            type="daterange"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            class="ele-fluid" />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 8, md: 8 } : { span: 8 }">
          <el-form-item label="申请状态:"
                        prop="currentStatus">

            <el-select clearable
                       v-model="where.currentStatus"
                       placeholder="请选择申请状态"
                       class="ele-fluid">
              <el-option v-for="(i,j) in applicationStatusList"
                         :key="j"
                         :label="i.label"
                         :value="i.value" />

            </el-select>
          </el-form-item>
        </el-col>

        <el-col v-bind="styleResponsive ? { lg: 8, md: 8 } : { span: 8 }">
          <div class="ele-form-actions">
            <el-button type="primary"
                       icon="el-icon-search"
                       class="ele-btn-icon"
                       @click="search">
              查询
            </el-button>
            <el-button @click="resetForm('where')">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    // 默认表单数据
    const defaultWhere = {

      // 申请时间
      dateRange: [],
      //   账户类型
      currentStatus: ''
    };
    return {

      // 表单数据
      where: { ...defaultWhere },

      applicationStatusList: [
        {
          label: '申请中',
          value: '1'
        },
        {
          label: '已通过',
          value: '2'
        },
        {
          label: '已驳回',
          value: '3'
        },
      ],
      sumbitForm: {}
    };
  },

  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    }
  },
  methods: {
    /* 搜索 */
    /* 搜索 */
    search () {
      for (const key in this.where) {
        console.log(this.where.dateRange)
        if (key == 'dateRange') {
          let startTime = this.where[key][0];
          let endTime = this.where[key][1];
          this.sumbitForm['startTime'] = startTime;
          this.sumbitForm['endTime'] = endTime;
        } else {
          this.sumbitForm[key] = this.where[key];
        }
      }

      this.$emit('search', this.sumbitForm);
    },
    /*  重置 */
    resetForm (formName) {
      this.$refs[formName].resetFields();
      this.sumbitForm = {};
      this.where = {};
      this.$emit('search', this.sumbitForm);
    },

  }
};
</script>
<style lang="less" scoped>
.navList {
  margin-bottom: 25px;
  font-weight: 700;
}
</style>
